<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单设计</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/static/component/pear/css/module/design.css"/>
    <link rel="stylesheet" href="/static/component/markdown/editor/editormd.min.css"/>


</head>
<body>
<style>
    .design_head {
        width: 100%;
        height: 50px;
        overflow: hidden;
        line-height: 50px;
        border-bottom: 1px solid #eee
    }

    .design_head .title {
        font-size: 16px;
        font-weight: 500;
        padding: 12px 18px;

    }

    .design_head .menu {
        text-align: center
    }

    .design_head .menu li {
        text-align: center;
        position: relative;
        cursor: pointer;
        font-size: 14px;
        line-height: 50px;
        padding-left: 15px;
        padding-right: 15px;
        transition-duration: .25s, 1s;
    }

    .design_head .menu li.on, .design_head .menu li:hover {
        background: var(--theme_color);
        color: #fff;

    }

    .design_head .menu li i {
        padding-right: 5px;
        font-size: 20px;
    }

</style>


<div class="view_body"></div>
<script type="text/html" id="view_body_data">
    <div class="design_head display_flex">
        <div class="flex_1 title">表单设计器</div>
        <div class=" display_flex menu">
            <li class="on display_flex">
                <i class="ruinuo-icon icon-biaodan"></i>设计
            </li>
            <li onclick="layui.design_form.FormSetting()" class="display_flex">
                <i class="ruinuo-icon icon-peizhi1"></i>配置
            </li>
            <li class="display_flex" onclick="layui.design_form.SaveSubmit(2)">
                <i class="ruinuo-icon icon-browse"></i>预览
            </li>
            <li class="display_flex" onclick="layui.design_form.SaveSubmit(1)">
                <i class="ruinuo-icon icon-check-item"></i>保存
            </li>
            {{# if(d.type == 1){ }}
            <li onclick="FileCode()" class="display_flex">
                <i class="ruinuo-icon icon-ccaozuo"></i>生成
            </li>
            {{# } }}
            <li onclick="layui.public.DrawerTpl('.mode_list','300px','模块类别')" class="display_flex">
                <i class="ruinuo-icon icon-menu"></i>模块
            </li>

        </div>
        <div class="flex_1">

        </div>
    </div>
    <div class="design-con">
        <section class="design-left">
            <div class="design-title">表单控件</div>
            <div class="design_height">
                <div class="components-list">
                    {{# layui.each(d.design, function(index, item){ }}
                    <div class="widget-cate">{{item.name}}</div>
                    <ul id="control_{{index}}">
                        {{# layui.each(item.children, function(index2, item2){ }}
                        <li mode="{{item2.num}}" class="form-edit-widget-label"><a><i
                                class="ruinuo-icon {{item2.icon}}"></i><span>{{item2.name}}</span></a>
                        </li>
                        {{# }); }}
                    </ul>
                    {{# }); }}
                </div>
            </div>
        </section>
        <section class="design-center">
            <div class="design-title">设计区域</div>
            <div style="background:#f5f5f5; padding:10px" class="layui-form layui-row ruinuo_box label_con">
                <div id="mainContainer" class="form_top"></div>
            </div>
        </section>
        <section class="design-right">
            <div class="design-title">控件配置</div>
            <div class="design_height">
                <div class="layui-form form_top design-right-con"></div>
            </div>
        </section>
    </div>

</script>
<script type="text/html" id="design-right-con-data"></script>
<script type="text/html" id="get_tpl"></script>
<div style="display: none" class="view_mode_list"></div>
<script type="text/html" id="view_mode_list_data">
    <div class="mode_list">
        <div class="layui-card-body">
            <div class="layui-menu">
                <div class="inputdiv">
                    <i class="layui-icon layui-icon-search"></i>
                    <input type="text" autocomplete="off" class="layui-input ruinuo_drawer_search"
                           placeholder="输入关键词检索">
                </div>
                {{# layui.each(d.modelist, function(index, item){ }}
                <li lay-options="{type: 'group'}" class="layui-menu-item-group layui-menu-item-up">
                    <div class="layui-menu-body-title" style=" font-weight: bold;color:#000;">
                        {{item.name}}<i class="layui-icon layui-icon-down"></i>
                    </div>
                    <ul>
                        {{# layui.each(item.children, function(iindex, iitem){ }}
                        <li data-id="{{iitem.id}}" data-mode="form" onclick="layui.public.DrawerClick(this);">
                            <div class="layui-menu-body-title">{{iitem.name}}</div>
                        </li>
                        {{# }); }}
                    </ul>
                </li>
                {{# }); }}
            </div>
        </div>
    </div>
</script>
<div style="display: none" class="view_browse"></div>
<script type="text/html" id="view_browse_data"></script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script src="/static/component/pear/module/ruinuo/sortable.js"></script>
<script src="/static/component/pear/module/ruinuo/xm-select.js"></script>
<script src="/static/component/pear/module/ruinuo/code.js"></script>
<script>
    let $ = layui.jquery;
    let jQuery = layui.jquery;
</script>
<script src="/static/component/markdown/editor/editormd.min.js"></script>
<script>
    let config = [];
    let InitData = {};
    let SeleteData = {};
    let SettingData = {};
    let raw = '';
    let menu_code = "";
    let type = 1;
    let eventForm = 1;
    layui.use(['design_form', 'form', 'http', 'public'], function () {
        type = layui.public.GetQuery('type') || 1;
        layui.design_form.Init();
        layui.form.on('select(form_label)', function (data) {
            let value = data.value;
            $('#mainContainer').attr('class', value);
        })
    })

    function SelectAllAction(res = [], field = '') {
        if (field == "field") {
            let text = res.arr[0].text || '';
            $(".design-right-con input[name='title']").val(text);
        }
        setTimeout("layui.design_form.UpJson()", 100);
    }

    function SelectAction() {
        layui.form.on('select(select_filter)', function (data) {
            let elem = data.elem;
            let field = $(elem).attr('name');
            if (field == "field") {
                let text = $(".design-right-con select[name='field']").find('option:selected').text();
                let item = text.split('_');
                $(".design-right-con input[name='title']").val(item[0]);
            }
            if (field == "mode_id") {

            }

            layui.design_form.UpJson();
        })
    }

    function CheckboxAction() {
        layui.form.on('checkbox(checkbox_filter)', function (data) {
            layui.design_form.UpJson();
        })
    }

    function RadioAction() {
        layui.form.on('radio(radio_filter)', function (data) {
            layui.design_form.UpJson();
        })
    }

    function SwitchAction() {
        layui.form.on('switch(switch_filter)', function (data) {
            layui.design_form.UpJson();
        })
    }

    function TableAction(id = '') {
        layui.design_form.UpJson();
    }

    function SearchLoad() {
        switch (eventForm) {
            case 2:
                layui.http.SendAjax('/common/options/LeftLists/', {num: 'options_list'}, [], function (res) {
                    InitData['source']['options_list'] = res.data;
                    let item = res.data.rows[0];
                    $(".design-right-con select[name='options_num'] option:first-child").after("<option selected value='" + item.value + "'>" + item.label + "</option>");
                    layui.form.render();
                    layui.design_form.UpJson();
                })
                break;
            default:
                layui.design_form.Init();
        }
    }

    function FileCode() {
        let GetConfig = layui.design_form.GetSetting();
        let modeid = GetConfig.modeid || 0;
        if (modeid == 0) {
            layer.msg('请先选择模块', {icon: 2});
            layui.public.DrawerTpl('.mode_list', '300px', '模块类别');
            return false;
        }
        layui.http.SendAjax('/ruinuo/mode/filecode/', {id: modeid}, [], function (res) {
            if (res.code == 200) {
                layer.msg('生成成功', {icon: 1});
            } else {
                layer.msg(res.msg, {icon: 2});

            }
        })
    }
</script>

</body>
</html>
